<script lang='ts' setup>
import { ref, } from "vue"


const columns = ref([
    {
        title: "服务编号",
        dataIndex: "no",
        key: "no",
    },
    {
        title: "服务名称",
        dataIndex: "name",
        key: "name",
    },
    {
        title: "服务周期",
        dataIndex: "cycle",
        key: "cycle",
    },
    {
        title: "购买时间",
        dataIndex: "purchaseDate",
        key: "purchaseDate",
    },
    {
        title: "状态",
        dataIndex: "status",
        key: "status",
    },
    {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
    },

]);



const dataSource2 = ref([
    {
        key: "1",
        no: 1,
        name: "后台",
        cycle: 32,
        status: "正常",
        purchaseDate: "2022-02-24",
        autoRecharge: false
    }, {
        key: "2",
        no: 2,
        name: "充值域名",
        cycle: 32,
        status: "即将过期",
        purchaseDate: "2022-02-24",
        autoRecharge: false
    }, {
        key: "3",
        no: 3,
        name: "统计域名",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
    {
        key: "3",
        no: 3,
        name: "API",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
    {
        key: "3",
        no: 3,
        name: "代理",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
    {
        key: "4",
        no: 4,
        name: "下发服务",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
]);

const open3 = ref<boolean>(false);
const handleOk3 = () => {
    open3.value = false;
};

// const handleOk = () => {
//     if (open.value.code === '') {
//         message.error("请填写验证码")
//         return;
//     }
//     open.value.show = false
//     open.value.code = ''
//     emit('updateEncrypt', open.value.item)
// }

const open4 = ref<boolean>(false);
const handleOk4 = () => {
    open4.value = false;
};

</script>
<template>
    <a-descriptions title="基础信息" bordered>
        <a-descriptions-item label="平台名称">
            <input class="w-full h-full border-0 outline-none" placeholder="请填写平台名称" />
        </a-descriptions-item>
        <a-descriptions-item label="平台域名" :span="2">
            <input class="w-full h-full border-0 outline-none" placeholder="请填写平台域名" />
        </a-descriptions-item>
        <a-descriptions-item label="联系人QQ" :span="1">
            <input class="w-full h-full border-0 outline-none" placeholder="请填写联系人QQ" />
        </a-descriptions-item>
        <a-descriptions-item label="联系人电话" :span="2">
            <input class="w-full h-full border-0 outline-none" placeholder="请填写联系人电话" />
        </a-descriptions-item>
        <a-descriptions-item label="技术联系QQ" :span="1">
            <input class="w-full h-full border-0 outline-none" placeholder="请填写技术联系QQ" />
        </a-descriptions-item>
        <a-descriptions-item label="技术联系电话" :span="2">
            <input class="w-full h-full border-0 outline-none" placeholder="请填写技术联系电话" />
        </a-descriptions-item>
        <a-descriptions-item label="售后专员" :span="1">NEKAX,QQ：123456</a-descriptions-item>
        <a-descriptions-item label="平台授权码查看" :span="4">
            <div class="flex items-center">
                <a-button type="primary" @click="open4 = true">查看</a-button>
            </div>
        </a-descriptions-item>

        <slot />

    </a-descriptions>


    <a-modal v-model:open="open4" title="附属软件" @ok="handleOk4" width="1500px" @cancel="">
        <a-table :scroll="{ x: 1000, }" :dataSource="dataSource2" :columns="columns">
            <template #bodyCell="{ column, }">
                <template v-if="column.key === 'operation'">
                    <div class="flex">
                        <a-button type="primary" class="mr-5" @click="open3 = true">授权码</a-button>
                    </div>
                </template>
            </template>
        </a-table>
    </a-modal>

    <a-modal v-model:open="open3" @ok="handleOk3">
        <div class="pt-8">
            当前授权码：xxxxxxxxxxxxxxxxxx
        </div>
    </a-modal>

</template>
<style lang='scss' scoped></style>